<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <!-- 小程序装修 -->
      <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
        <el-form-item label="模块名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="模块图标" prop="partLogo">
          <ImageUpload v-model="form.partLogo" :limit="1" />
        </el-form-item>

        <el-form-item label="模块类型" prop="type">
          <el-radio-group v-model="form.type" size="large" @change="changeType">
            <el-radio-button label="0">文本框</el-radio-button>
            <el-radio-button label="1">自定义</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="form.type==0" label="文本框">
          <editor v-model="form.content" :min-height="190" />
        </el-form-item>
        <div v-if="form.type==1">
          <el-form-item label="文本框">
            <editor v-model="form.content2" :min-height="190" />
          </el-form-item>
          <el-form-item label="图片">
            <ImageUpload v-model="form.pics" />
          </el-form-item>
          <el-form-item label="字段">
            <el-checkbox-group v-model="form.fields">
              <el-checkbox label="0">姓名</el-checkbox>
              <el-checkbox label="1">手机号</el-checkbox>
              <el-checkbox label="2">需求描述</el-checkbox>

            </el-checkbox-group>
          </el-form-item>
        </div>


        <el-form-item label="是否开启" prop="flag">
          <el-switch v-model="flag" active-value="1" inactive-value="0" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm">保 存</el-button>
        </el-form-item>

      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import { reactive } from 'vue'
import { toRefs } from '@vueuse/shared'
import { getCurrentInstance } from '@vue/runtime-core'
import { getBaseVenue, miniappEdit, miniappIconEdit } from '../../../../api/ven/index'
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
const data = reactive({
  form: {
    name: '',
    type: '0'
  },
  flag: '0',
  rules: {
    name: [{ required: true, message: '必填', trigger: 'blur' }],
    partLogo: [{ required: true, message: '必填', trigger: 'blur' }]
  }
})
const { form, rules, flag } = toRefs(data)

let miniappIconConfig

function getBaseVenInfo() {
  getBaseVenue(useUserStore().user.venueId).then((res) => {
    flag.value = res.data.miniappCustFlag
    if (res.data.miniappCustConfig) {
      form.value = JSON.parse(res.data.miniappCustConfig)
    }
    miniappIconConfig = JSON.parse(res.data.miniappIconConfig)
  })
}


function changeType(val) {
  console.log(val)
}
function submitForm() {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      const obj = {
        flag: flag.value,
        config: JSON.stringify(form.value)
      }

      miniappEdit(obj).then(res => {
        ElMessage({
          message: res.msg,
          type: 'success'
        })
        getBaseVenInfo()
        changeIconConfig()
      })
    }
  })
}

const changeIconConfig = () => {
  const obj = {
    name: form.value.name,
    partLogo: form.value.partLogo.replace(import.meta.env.VITE_APP_FILE_URL, ''),
    path: '/pages/form/index',
    isBase: '0'
  }
  const index = _.findIndex(miniappIconConfig, (m) => {
    return m.isBase === '0'
  })
  if (index === -1) {
    miniappIconConfig.push(obj)
  } else {
    miniappIconConfig[index] = obj
  }

  miniappIconEdit({
    config: JSON.stringify(miniappIconConfig)
  })
}

getBaseVenInfo()
</script>

<style>
</style>
